<template>
    <!-- 调整历史记录查询 -->
    <div class="main-container" id="main-container">
        <div style="background: #fff; height: 100%" id="adjuctHistorySelect">
            <PageTabelLayout>
                <template #pageHeader>
                    <div class="my-header" style="padding: 10px;box-sizing: border-box;" v-if="headerShow">
                        <a-form size="small" :model="searchData" auto-label-width layout="inline">
                            <a-form-item label="单据名称" label-col-flex="80px" :style="{width:'320px'}">
                                <a-input class="bacClass"  allow-clear
                                    v-model="searchData.receiptName" />
                            </a-form-item>
                            <a-form-item label="单号" label-col-flex="80px" :style="{width:'320px'}">
                                <a-input class="bacClass"  allow-clear v-model="searchData.numbers" />
                            </a-form-item>
                            <a-form-item label="调整项目" label-col-flex="80px" :style="{width:'320px'}">
                                <a-input class="bacClass"  allow-clear v-model="searchData.items" />
                            </a-form-item>
                            <a-form-item label="调整日期" label-col-flex="80px" :style="{width:'320px'}">
                                <a-range-picker  popup-container="html"  class="bacClass"  @change="changeSelectDate"
                                    allow-clear />
                            </a-form-item>
                        </a-form>
                    </div>
                    <div class="my-divisders">
                        <a-divider orientation="center">
                            <icon-double-up v-if="headerShow" @click="changHeadShow(false)" :strokeWidth="2" :size="18" />
                            <icon-double-down v-else @click="changHeadShow(true)" :strokeWidth="2" :size="18" />
                        </a-divider>
                    </div>
                    <div class="my-tool-bar" style="margin-bottom: 10px;">
                        <Toolbar :items="['查询', '导出']" @select="selectHandler" @export="exportHandler" />
                    </div>
                </template>
                <template #pageTabel>
                    <a-spin :loading="pageLoading.value" tip="加载中" dot style="height:99%;width: 100%;z-index:999 ;">
                        <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true"
                            rowSelection="multiple" @grid-ready="gridReady" style="height:100%" class='ag-theme-alpine'
                            :defaultColDef="defaultColDef" :rowData="table.dataList" :columnDefs="cfsValue"
                            :localeText="localeTextData" @columnResized="onColumnResized" @columnMoved="onColumnMoved" />
                    </a-spin>
                </template>
                <paginationCopys :page-size-options="pagingList1" :total="total" show-total show-jumper show-page-size @change="changePage"
                    @page-size-change="changeSize" style="justify-content: center;margin-top: 10px;"
                    :page-size="pagination.pageSize" :current="pagination.page" />
            </PageTabelLayout>
        </div>
    </div>
</template>

<script  lang="ts">
import PageTabelLayout from '@/components/pageTabelLayout.vue';
import { reactive, ref, onMounted } from 'vue'
import emitter from "@/hooks/useEventBus";

import { localeText } from '@/api/aggridZw'
import { usePagination, useTable } from '@/hooks/table';
import { Message } from '@arco-design/web-vue';
import { table } from 'console';
import { assTable } from '@/utils/assemblyLevelTable';
import { findHistory } from '@/api/DyeingshopManagement/getOrderFn';
import { saveOrUpdateGridState as saveOrUpdateGridState01 } from '@/hooks/useGridState'
import { pagingList } from "@/api/paging";

export default {
    name: 'adjuctHistorySelect',
    components: { PageTabelLayout,  },
    setup() {
        let pageLoading = ref<boolean>(false)
        let headerShow = ref<boolean>(true);
        let findHistoryApi = findHistory();
        const table = useTable();
        let changHeadShow = (boolVal: boolean) => {
            headerShow.value = boolVal;
            emitter.emit('window-change');
        };
        onMounted(() => {
            selectHandler();
        });
        const selectHandler = () => {
            pagination.page = 1;
            doRefresh();
        };
        const searchData = reactive<{
            receiptName: string;
            items: string;
            numbers: string;
            createTime: string;
            createTime2: string;
        }>({
            receiptName: '',
            items: "",
            numbers: "",
            createTime: '',
            createTime2: ''
        });
        const doRefresh = async () => {
            pageLoading.value = true
            updateGridState01()
            await findHistoryApi.getFindHistoryList({ page: pagination.page, limit: pagination.pageSize, ...searchData }).then(({ data, code, message }: any) => {
                // console.log(data,code)
                if (code === 200) {
                    gridOption.value.sizeColumnsToFit();
                    table.handleSuccess(data.list);
                    gridOption.value.setRowData(data.list);
                    total.value = data.total;
                    pageLoading.value = false
                } else {
                    Message.error(message)
                    pageLoading.value = false
                }
            })
        };
        const pagination = usePagination(doRefresh);
        //表格方面
        const gridOption = ref();
        const colState = ref()
        const gridReady = (params: any) => {
            gridOption.value = params.api;
            colState.value = params.columnApi
            //调整表格自适应大小
        }
        const defaultColDef = {
            sortable: true,
            resizable: true,
            filter: true,
            flex: 1
        };
        let cfsValue: any = [
            {
                headerName: "单据名称",
                field: "receiptName",
            },
            {
                headerName: "单号",
                field: "numbers",
            },
            {
                headerName: "调整项目",
                field: "items",
            },
            {
                headerName: "计算机",
                field: "ip",
            },
            {
                headerName: "修改人",
                field: "updateName",
            },
            {
                headerName: "修改日期",
                field: "updateTime",
            },
            {
                headerName: "部门名称",
                field: "depName",
            }
        ];

        let a = [{
            showRowGroup: 'hide_def',
            "headerName": "",
            "checkboxSelection": true,
            "headerCheckboxSelection": true,
            "pinned": "left",
            "width": 50,
            resizable: false,
            filter: false,
            sortable: false,
            minWidth: 50,
            maxWidth: 50,
            lockPosition: "left",
        }]
        cfsValue = a.concat(cfsValue);
        const total = ref(10);
        const changePage = (val: any) => {
            pagination.page = val
            doRefresh();
        }
        const changeSize = (val: any) => {
            pagination.pageSize = val
            doRefresh();
        }

        const localeTextData: any = ref(localeText);
        const exportHandler = () => {
            let selectList = gridOption.value.getSelectedRows();
            // console.log(selectList);
            if (selectList.length === 0) {
                Message.error('请勾选需要导出的数据')
                return
            } else {
                //导出数据
                let nowRow = table.dataList.filter(function (o) {
                    return (gridOption.value.getSelectedRows().map((o: any) => { return o.id })).indexOf(o["id"]) !== -1;
                })
                assTable(cfsValue, nowRow, '调整历史记录');
            }
        };

        const changeSelectDate = (dates: any) => {
            searchData.createTime = dates ? dates[0] : '';
            searchData.createTime2 = dates ? dates[1] : '';
        }
        const pagingList1: any = ref(pagingList)
        const { saveGridState: saveGridState01, updateGridState: updateGridState01 } = saveOrUpdateGridState01('adjuctHistorySelect01', gridOption, colState, cfsValue)
        const onColumnMoved = () => {
            saveGridState01()
        }
        const onColumnResized = () => {
            saveGridState01()
        }
        return {
            saveOrUpdateGridState01,
            saveGridState01,
            updateGridState01,
            onColumnMoved,
            onColumnResized,
            colState,
            pageLoading,
            pagingList1,
            pagination,
            table,
            localeTextData,
            changePage,
            changeSize,
            total,
            cfsValue,
            defaultColDef,
            gridReady,
            changHeadShow,
            selectHandler,
            searchData,
            headerShow,
            exportHandler,
            changeSelectDate
        }
    }
}

</script>
<style scoped>
.main-container {
    height: 100%;
}

.arco-drawer-header .arco-drawer-title {
    width: 100%;
}

.bacClass {
    background: #fff;
    width: 270px;
    border: 1px solid #c9cdd3;
}

:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
}

.aInputLine {
    border: 1px solid #c9cdd3;
    background: #fff;
}
:deep(.arco-picker input){
    padding-left: 0 !important;
}
:deep(.arco-picker){
    padding-left: 0 !important;
}
:deep(.arco-picker-separator){
    padding: 0 !important;
}

</style>